<!doctype html>
<html lang="zh-CN">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <title>人人影视</title>
    <!-- Template CSS -->
    <!--
        <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    -->
    <link rel="stylesheet" th:href="@{/static/css/style-starter.css}">
    <script th:src="@{/static/layui.js}"></script>
    <script th:src="@{/static/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}">
</head>

<body>

<!-- header -->
<header class="w3l-header fixed-top" id="site-header">
    <!--/nav-->
    <nav class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3">
        <div class="container">
            <h1><a class="navbar-brand" href="index.html">
                人人影视 </a></h1>
            <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
                    class="navbar-toggler collapsed" data-target="#navbarSupportedContent" data-toggle="collapse"
                    type="button">
                <!-- <span class="navbar-toggler-icon"></span> -->
                <span class="fa icon-expand fa-bars"></span>
                <span class="fa icon-close fa-times"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" th:href="@{/user/toIndex}">主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系我们</a>
                    </li>
                </ul>

                <!--/search-right-->
                <!--/search-right-->
                <div class="search-right">
                    <a class="btn search-hny mr-lg-3 mt-lg-0 mt-4" href="#search" title="search">搜索<span
                            aria-hidden="true" class="fa fa-search ml-3"></span></a>
                    <!-- search popup -->
                    <div class="pop-overlay" id="search">
                        <div class="popup">
                            <form class="search-box" method="post" th:action="@{/video/search}">
                                <input autofocus="" name="videoTitle" placeholder="Search your Keyword"
                                       required="required" type="search">
                                <button class="btn" type="submit"><span aria-hidden="true"
                                                                        class="fa fa-search"></span></button>
                            </form>
                            <div class="browse-items">
                                <h3 class="hny-title two mt-md-5 mt-4">荣光影视搜索</h3>
                                <ul class="search-items">
                                    <li><a href="#">影视</a></li>
                                    <li><a href="#">新闻</a></li>
                                    <li><a href="#">生活</a></li>
                                    <li><a href="#">美食</a></li>
                                    <li><a href="#">音乐</a></li>
                                    <li><a href="#">电视剧</a></li>
                                    <li><a href="#">舞蹈</a></li>
                                    <li><a href="#">动漫</a></li>
                                    <li><a href="#">娱乐</a></li>
                                    <li><a href="#">科技数码</a></li>
                                    <li><a href="#">体育</a></li>
                                    <li><a href="#">美妆</a></li>
                                </ul>
                            </div>
                        </div>
                        <a class="close" href="#close">×</a>
                    </div>
                    <!-- /search popup -->
                    <!--/search-right-->
                </div>


            </div>
            <!-- toggle switch for light and dark theme -->
            <div class="mobile-position">
                <nav class="navigation">
                    <div class="theme-switch-wrapper">
                        <label class="theme-switch" for="checkbox">
                            <input id="checkbox" type="checkbox">
                            <div class="mode-container">
                                <i class="gg-sun"></i>
                                <i class="gg-moon"></i>
                            </div>
                        </label>
                    </div>
                </nav>
            </div>
            <!-- //toggle switch for light and dark theme -->
            <!--<button type="button" class="btn btn-primary btn-lg active">登录</button>-->
            <div th:unless="${session.user}">
                <a class="btn btn-primary btn-lg" style="height: 38px;font-size: 14px;"
                   th:href="@{/user/toLogin}">登录</a>
            </div>
            <div th:if="${session.user}">
                <button class="layui-btn layui-btn-primary" id="demo4">
                    <span th:text="${session.user.userName}"></span>
                    <i class="layui-icon layui-icon-more-vertical layui-font-12">
                    </i>
                </button>
                <!--
                                <img th:src="@{/static/img/1.jpg}" class="img-circle">
                -->
            </div>
        </div>
    </nav>
    <!--//nav-->
</header>
<!-- //header -->
<section class="w3l-grids">
    <div class="grids-main py-5">
        <div class="container py-lg-3">
            <center>
                <div class="headerhny-title" style="width:500px;margin-top: 40px">


                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">视频标题</label>
                            <div class="layui-input-inline">
                                <input autocomplete="off" class="layui-input" lay-verify="required" name="videoTitle"
                                       required type="text">
                            </div>
                            <div class="layui-form-mid layui-word-aux"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px">视频描述</label>
                            <div class="layui-input-inline">
                                <textarea class="layui-textarea" name="videoInfo" placeholder="请输入内容"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">视频类型</label>
                            <div class="layui-input-inline">
                                <select name="typeName">
                                    <option th:each="p : ${videoTypeList}" th:text="${p.typeName}">
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-filter="formDemo" lay-submit type="submit">立即提交
                                </button>
                            </div>
                        </div>
                    </form>
                    <!--头像上传begin-->
                    <div class="layui-upload">
                        <button class="layui-btn" id="test1" type="button">上传视频图片</button>
                        <div class="layui-upload-list" style="width: 100px;height: 100px;">
                            <img class="layui-upload-img" id="demo1" style="height: 100%; width: 100%;">
                            <p id="demoText"></p>
                        </div>
                    </div>
                    <div style="width:300px;">
                        <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showpercent="yes">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                    <p style="margin-top: 10px; color: #666;">进度条</p>
                    <div style="margin-top: 10px;">
                        <!-- 示例-970 -->
                        <ins class="adsbygoogle" data-ad-client="ca-pub-6111334333458862"
                             data-ad-slot="3820120620" style="display:inline-block;width:970px;height:90px"></ins>
                    </div>
                    <!--头像上传end-->


                </div>
                <div class="layui-btn-container">
                    <button class="layui-btn" id="test5" type="button"><i class="layui-icon"></i>上传视频</button>
                </div>
            </center>
        </div>
    </div>
</section>


<footer class="w3l-footer">
    <section class="footer-inner-main">
        </div>
        <div class="below-section">
            <div class="container">
                <div class="copyright-footer">
                    <div class="columns text-lg-left">
                        <p>&copy; 2021 软件17-4胡建. All rights reserved | Designed by</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- copyright -->
        <!-- move top -->
        <button id="movetop" onclick="topFunction()" title="Go to top">
            <span aria-hidden="true" class="fa fa-arrow-up"></span>
        </button>
        <script>
            // When the user scrolls down 20px from the top of the document, show the button
            window.onscroll = function () {
                scrollFunction()
            };

            function scrollFunction() {
                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("movetop").style.display = "block";
                } else {
                    document.getElementById("movetop").style.display = "none";
                }
            }

            // When the user clicks on the button, scroll to the top of the document
            function topFunction() {
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
            }
        </script>
        <!-- /move top -->

    </section>
</footer>
<!--//footer-66 -->
</body>

</html>
<!-- responsive tabs -->
<script>

    layui.use(['upload', 'element', 'form', 'dropdown', 'util', 'layer'], function () {
        /*<![CDATA[*/
        var ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/
        var dropdown = layui.dropdown
            , util = layui.util
            , layer = layui.layer
            , form = layui.form
            , element = layui.element
            , upload = layui.upload
            , $ = layui.jquery;
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                type: 'post',
                url: "/video/uAddVideo",
                dataType: "json",
                data: data.field,
                success: function (data) {
                    if (data == "200") {
                        layer.msg("填写成功", {icon: 1})
                    }
                }
            })
            return false
        });

        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/video/uploadImage' //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, index, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        //指定允许上传的文件类型
        upload.render({
            elem: '#test5'
            , url: '/video/uploadVideo' //改成您自己的上传接口
            , accept: 'video' //视频
            , done: function (res) {
                layer.msg('上传成功');
                window.location.href = "/user/toIndex"
            }
        });

        dropdown.render({
            elem: '#demo4'
            , trigger: 'hover'
            , data: [
                {
                    title: '个人中心'
                    , href: '/user/toUEditorUser'
                    , id: 100
                }, {
                    title: "消息中心"
                    , href: '/user/toMessage'
                    , id: 101
                }, {
                    title: '视频中心'
                    , href: '/video/toVideoCenter'
                    , id: 101
                }, {
                    title: '视频上传'
                    , href: '/video/toAddVideo'
                    , id: 102
                }, {
                    title: '退出'
                    , href: '/user/logout'
                    , id: 103
                }
            ]
        });
    })
</script>
<script th:src="@{/static/js/easyResponsiveTabs.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //Horizontal Tab
        $('#parentHorizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function (event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });
    });
</script>
<!-- //responsive tabs -->
<!--/theme-change-->
<script th:src="@{/static/js/theme-change.js}"></script>
<!-- //theme-change-->
<!-- script for owlcarousel -->
<!-- Template JavaScript -->
<script th:src="@{/static/js/jquery.magnific-popup.min.js}"></script>



